import {Image, StyleSheet, View, Text, TouchableOpacity, ScrollView} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';

export default function notificationScreen() {

    const router = useRouter();


    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '消息通知', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <ScrollView style={styles.notificationContainer}>
                <View style={styles.notificationItem}>
                    <View style={styles.showTime}>
                        <Text style={styles.showTimeText}>
                           09月27日 15:51
                        </Text>
                    </View>
                    <View style={styles.notificationContent}>
                        <View style={styles.notificationContentTitle}>
                           <Text style={styles.notificationContentTitleText}>系统消息</Text>
                        </View>
                        <View style={styles.notificationMain}>
                            <Text style={styles.notificationMainText} numberOfLines={2}>
                                您报名的活动[划龙船] 即将开始，开始时间: 2024-07-25 10:00
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={styles.notificationItem}>
                    <View style={styles.showTime}>
                        <Text style={styles.showTimeText}>
                            09月27日 15:51
                        </Text>
                    </View>
                    <View style={styles.notificationContent}>
                        <View style={styles.notificationContentTitle}>
                            <Text style={styles.notificationContentTitleText}>系统消息</Text>
                        </View>
                        <View style={styles.notificationMain}>
                            <Text style={styles.notificationMainText} numberOfLines={2}>
                                您报名的活动[划龙船] 即将开始，开始时间: 2024-07-25 10:00
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={styles.notificationItem}>
                    {/*<View style={styles.showTime}>*/}
                    {/*    <Text style={styles.showTimeText}>*/}
                    {/*        09月27日 15:51*/}
                    {/*    </Text>*/}
                    {/*</View>*/}
                    <View style={styles.notificationContent}>
                        <View style={styles.notificationContentTitle}>
                            <Text style={styles.notificationContentTitleText}>系统消息</Text>
                        </View>
                        <View style={styles.notificationMain}>
                            <Text style={styles.notificationMainText} numberOfLines={2}>
                                您报名的活动[划龙船] 即将开始，开始时间: 2024-07-25 10:00
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={styles.notificationItem}>
                    {/*<View style={styles.showTime}>*/}
                    {/*    <Text style={styles.showTimeText}>*/}
                    {/*        09月27日 15:51*/}
                    {/*    </Text>*/}
                    {/*</View>*/}
                    <View style={styles.notificationContent}>
                        <View style={styles.notificationContentTitle}>
                            <Text style={styles.notificationContentTitleText}>系统消息</Text>
                        </View>
                        <View style={styles.notificationMain}>
                            <Text style={styles.notificationMainText} numberOfLines={2}>
                                您报名的活动[划龙船] 即将开始，开始时间: 2024-07-25 10:00
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={styles.notificationItem}>
                    {/*<View style={styles.showTime}>*/}
                    {/*    <Text style={styles.showTimeText}>*/}
                    {/*        09月27日 15:51*/}
                    {/*    </Text>*/}
                    {/*</View>*/}
                    <View style={styles.notificationContent}>
                        <View style={styles.notificationContentTitle}>
                            <Text style={styles.notificationContentTitleText}>系统消息</Text>
                        </View>
                        <View style={styles.notificationMain}>
                            <Text style={styles.notificationMainText} numberOfLines={2}>
                                您报名的活动[划龙船] 即将开始，开始时间: 2024-07-25 10:00
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={styles.notificationItem}>
                    {/*<View style={styles.showTime}>*/}
                    {/*    <Text style={styles.showTimeText}>*/}
                    {/*        09月27日 15:51*/}
                    {/*    </Text>*/}
                    {/*</View>*/}
                    <View style={styles.notificationContent}>
                        <View style={styles.notificationContentTitle}>
                            <Text style={styles.notificationContentTitleText}>系统消息</Text>
                        </View>
                        <View style={styles.notificationMain}>
                            <Text style={styles.notificationMainText} numberOfLines={2}>
                                您报名的活动[划龙船] 即将开始，开始时间: 2024-07-25 10:00
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={styles.notificationItem}>
                    {/*<View style={styles.showTime}>*/}
                    {/*    <Text style={styles.showTimeText}>*/}
                    {/*        09月27日 15:51*/}
                    {/*    </Text>*/}
                    {/*</View>*/}
                    <View style={styles.notificationContent}>
                        <View style={styles.notificationContentTitle}>
                            <Text style={styles.notificationContentTitleText}>系统消息</Text>
                        </View>
                        <View style={styles.notificationMain}>
                            <Text style={styles.notificationMainText} numberOfLines={2}>
                                您报名的活动[划龙船] 即将开始，开始时间: 2024-07-25 10:00
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={styles.notificationItem}>
                    {/*<View style={styles.showTime}>*/}
                    {/*    <Text style={styles.showTimeText}>*/}
                    {/*        09月27日 15:51*/}
                    {/*    </Text>*/}
                    {/*</View>*/}
                    <View style={styles.notificationContent}>
                        <View style={styles.notificationContentTitle}>
                            <Text style={styles.notificationContentTitleText}>系统消息</Text>
                        </View>
                        <View style={styles.notificationMain}>
                            <Text style={styles.notificationMainText} numberOfLines={2}>
                                您报名的活动[划龙船] 即将开始，开始时间: 2024-07-25 10:00
                            </Text>
                        </View>
                    </View>
                </View>
            </ScrollView>

        </View>
    );
}

const styles = StyleSheet.create({
    notificationContainer: {
        paddingHorizontal: 12,
        paddingBottom: 100,
    },
    showTime: {
        marginTop: 10,
        marginBottom: 12,
    },
    showTimeText: {
        textAlign: "center",
        color: "#C0C3CE",
        fontSize: 14,
    },
    notificationItem: {
        marginBottom: 12,
    },
    notificationContent: {
        backgroundColor: "#fff",
        padding: 14,
        borderRadius: 10,
    },
    notificationContentTitle: {
        paddingBottom: 12,
        borderBottomWidth: 0.3,
        borderBottomColor: "#E4E6EC"
    },
    notificationContentTitleText: {
        fontSize: 16,
        fontWeight: "bold",
        color: '#2A2B30',
    },
    notificationMain: {
        marginTop: 12,
    },
    notificationMainText: {
        fontSize: 14,
        color: "#676978"
    },
});
